﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Slide the Knob</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, user-scalable=no"/>

    <!-- SlideMe.js contains all required information for building the bar, magnifying "iPhone," and changing the color of the knob -->

    <script type="text/javascript" type="text/javascript" charset="utf-8" src="SlideMe.js"></script>

    <!-- Slider.js contains all functionalities needed to animate the knob -->

    <script type="text/javascript" type="text/javascript" charset="utf-8" src="Slider.js"></script>

    <!-- SlideMe.css is used to style this page -->

    <link rel="stylesheet" href="SlideMe.css" type="text/css" media="screen" charset="utf-8"/>

</head>

<body>

    <!-- Contains a string whose font size is controlled by the movements of a knob along a slider bar -->

    <div id="text" class="information">iPhone</div>

    <div id="container">

         <!-- Builds a slider bar -->

          <canvas id="canvas" width="303" height="140"></canvas>

         <!-- Shows a knob that moves along a slider bar -->

         <!-- knob, which is initially red, turns green when touched, yellow when moved, and red when released -->

         <div id="knob"></div>

    </div>

    <div id="message">Move the knob to magnify "iPhone."</div>

</body>

</html>
